<template>
  <view>
    <HeaderBar backgroundColor="#f5f5f5" textColor="#666" isFixed="false" title="商品详情" >
    </HeaderBar>
    <view class="goodDetail">
      <view class="detailSub">商品名称: <span class="subtit">{{currentGood.title||`--`}}</span></view>
      <view v-if="currentGood && currentGood.image" class="imgcon">
        <img class="product-image" :src="require(`@/assets/imgs/${currentGood.image}`)" :onerror="handleError"
          mode="aspectFill" />
      </view>
      <view v-else class="imgcon">
        <img class="product-image" :src="require(`@/assets/imgs/default.jpg`)" :onerror="handleError" mode="aspectFill" />
      </view>
      <view class="detailCore">
        <view class="itemcore">
          <span class="itemname">商品描述</span>
          <view class="itemdecs">酸笋珍品，味觉盛宴！

            🌿 自然发酵，古法秘制
            我们的酸笋采用传统古法发酵，经过精心挑选的竹笋，在天然环境下自然发酵，每一口都充满了大自然的醇厚与清新。

            💧 酸爽可口，回味无穷
            独特的发酵工艺使得酸笋具有浓郁的酸味，咬一口，酸爽直冲味蕾，让人回味无穷。无论是搭配米饭、面条还是作为小食，都是绝佳的选择。

            🌱 营养丰富，健康之选
            酸笋不仅味道独特，还富含多种维生素和矿物质，是健康饮食的不二之选。经常食用，有助于促进消化，增强免疫力。

            🏆 品质保证，值得信赖
            我们始终坚持严格的质量控制和选材标准，确保每一颗酸笋都达到最高品质。我们的产品深受消费者喜爱，是您餐桌上的必备佳品。

            🎁 限时优惠，不容错过
            现在购买，还将享受限时优惠！快来品尝这份来自大自然的味觉盛宴，让酸笋的醇香伴您度过每一个美好时刻！

            **酸笋，不仅仅是食材，更是一场味蕾的狂欢！**🎉</view>

        </view>
        <view class="itemcore">
          <span class="itemname">商品规格</span>
          <view class="itemdecs">酸笋产品规格

            🌿 品牌与产地：

            品牌：XX品牌
            产地：中国 [具体省份/地区]
            🌱 包装规格：

            净含量：XX克/袋
            包装材料：食品级塑料袋
            保质期：XX个月
            🍃 产品特点：

            选用新鲜竹笋，经过自然发酵，口感酸爽
            不添加任何化学防腐剂，保持食材的原汁原味
            营养丰富，富含维生素和矿物质
            🎁 适用场景与用途：

            适合搭配米饭、面条、炒菜等，增加食物的口感和风味
            也可作为小吃、配菜，是居家旅行必备美食
            🔍 使用方法与建议：

            打开包装前请检查包装是否完好，如有破损请勿食用
            烹饪前建议先用清水冲洗，去除多余的酸味
            可根据个人口味调整烹饪方法和配料
            🛒 购买须知：

            请在XX电商app内购买，确保购买到正品
            如有任何质量问题，请联系客服进行退换货
            温馨提示：酸笋为发酵食品，请根据个人口味和健康状况适量食用。

            快来XX电商app选购这款美味的酸笋，让您的餐桌更加丰富多彩！🎉</view>

        </view>
        <view class="itemcore">
          <span class="itemname">商品价格</span>
          <view class="itemdecs redprice">{{currentGood.price||'¥XX.XX'}}/袋</view>
        </view>
      </view>
    </view>

    <view class="lastfoot">
      <DetailNavigation />
    </view>
  </view>
</template>

<script>
import HeaderBar from '@/components/HeaderBar.vue';
import DetailNavigation from "@/components/DetailNavigation"
export default {
  components: {
    HeaderBar,
    DetailNavigation
  },
  computed:{  
    goodId(){
      let result = this.$route.params && this.$route.params.id || '';
      return result;
    },
    currentGood(){
      let result = this.topProducts[this.goodId-1]||this.topProductsp[0]
      return result
    }  
  },  
  data() {
    return {
      topProducts: [
        { id:1,
          image: "1.jpg",
          title: "自制酸笋",
          price: "¥6.5",
          size:"500g/袋"
        },
        { id:2,
          image: "2.jpg",
          title: "麻笋",
          price: "¥6.5",
          size:"500g/袋"
        },
        { id:3,
          image: "3.jpg",
          title: "绿竹笋",
          price: "¥6.5",
          size:"500g/袋"
        },
        { id:3,
          image: "1.jpg",
          title: "新鲜笋尖",
          price: "¥6.5",
          size:"500g/袋"
        },
      ],
    }
  },
  methods: {
    handleError(event) {
      event.target.src = require('@/assets/imgs/default.jpg'); // 替换为默认图片路径  
    }
  }
}
</script>

<style scoped lang="less">  .goodDetail {
    height: auto;
    width: 100%;

    .detailSub {
      display: flex;
      // height:120px;
      justify-content: center;
      align-items: center;
      margin-top: 60px;

      .subtit {
        margin-left: 10px;
        font-size: 20px;
        font-weight: 500;
      }
    }

    .imgcon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 300px;
      overflow: hidden;
      position: relative;

      .product-image {
        display: block;
        max-width: 100%;
        max-height: 100%;
        width: 80%;
        height: 80%;
        transition: transform 0.3s ease;

        /* 添加过渡效果 */
        &:hover {
          /* 当用户点击图片时 */
          transform: scale(1.2);
          /* 放大到1.2倍 */
        }
      }
    }

    .detailCore {
      display: flex;
      flex-direction: column;
      margin-bottom: 50px;

      .itemcore {
        display: flex;
        justify-content: space-between; // 使用space-between来在主轴上对齐子项  
        align-items: flex-start; // 使用flex-start来在交叉轴上对齐子项  
        width: 100%;
        border-bottom: 2px solid #5e5e5e;
        margin-bottom: 30px;

        .itemname {
          width: 40%;
          display: flex;
          justify-content: center;
          align-items: center; // 垂直居中文本  
          background: #2480db;
          padding: 10px;
          color: #fff;
        }

        .itemdecs {
          margin-left: 20px;
          display: flex;
          flex-grow: 1; // 允许itemdecs占据剩余空间  
          overflow-wrap: break-word; // 允许文本在必要时换行  
          word-wrap: break-word; // 同上，为了兼容老版本浏览器  
          word-break: break-all; // 强制换行  
          padding: 10px; // 可选：添加内边距以提供更好的可读性  
        }
        .redprice{
          color:#f80f0f;
          font-weight: 600;
        }
      }
      .itemcore:last-child{
        border-bottom: 0;
      }
    }
  }</style>